<template>
  <div>
    <Button
      type="primary"
      @click="info"
    >
      Display info prompt
    </Button>
    <Button @click="success">
      Display success prompt
    </Button>
    <Button @click="warning">
      Display warning prompt
    </Button>
    <Button @click="error">
      Display error prompt
    </Button>
    <Button @click="loading">
      Display loading...
    </Button>
    <Button @click="closable">
      Display a closable message
    </Button>
  </div>
</template>
<script>
export default {
  methods: {
    info () {
      this.$Message.info({
        content: '这是一条普通的提示',
        duration: 1000,
        background: true
      })
      this.$Message.success({
        content: '这是一条普通的提示',
        duration: 1000,
        background: true
      })
      this.$Message.warning({
        content: '这是一条普通的提示',
        duration: 1000,
        background: true
      })
      this.$Message.error({
        content: '这是一条普通的提示',
        duration: 1000,
        background: true
      })
    },
    success () {
      this.$Message.success('This is a success tip')
    },
    warning () {
      this.$Message.warning('This is a warning tip')
    },
    error () {
      this.$Message.error('This is an error tip')
    },
    loading () {
      const msg = this.$Message.loading({
        content: 'Loading...',
        duration: 0
      })
      setTimeout(msg, 3000)
    },
    closable () {
      this.$Message.info({
        content: 'Tips for manual closing',
        duration: 1000,
        closable: true
      })
    }
  }
}
</script>
